<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/register.css}"/>
    <link href="../../../static/css/register.css" rel="stylesheet"/><!--非tomcat情况-->
    <link rel="stylesheet" th:href="@{/static/css/inputLine.css}"/>
    <link href="../../../static/css/inputLine.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="left-container">
        <div class="login-container">
            <a id="login" th:href="@{/login}">登录</a>
        </div>
    </div>
    <div class="right-container">
        <div class="title"><span>注册</span></div>
        <form class="input-container" id="form" style="height: 100%">
            <label>
                <span>用户名：</span>
                <input id="username" placeholder="请输入用户名" type="text">
            </label>
            <label>
                <span>密 码：</span>
                <input id="password" placeholder="密码" type="password">
            </label>
            <label>
                <span>年 龄：</span>
                <input id="age" placeholder="年龄" type="text"/>
            </label>
            <label>
                <span>生 日：</span>
                <input id="birthday" placeholder="生日" type="date">
            </label>
            <label>
                <button id="submit" type="submit">提交</button>
            </label>
        </form>
    </div>
</div>
<script th:src="@{/static/js/anime.min.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/lib/jquery/jquery-3.7.1.min.js}"></script>
<script th:src="@{/static/lib/layer/layer.js}"></script>
</body>
</html>
<script>
    $("#submit").click(
        function (event) {
            event.preventDefault();
            const username = $("#username").val();
            const password = $("#password").val();
            const age = $("#age").val();
            const birthday = $("#birthday").val();
            // console.log(birthday);
            if (username === "") {
                layer.msg("用户名为空", {icon: 2, time: 1000});
                return;
            }
            if (password === "") {
                layer.msg("密码为空", {icon: 2, time: 1000});
                return;
            }
            if (age === "") {
                layer.msg("年龄为空", {icon: 2, time: 1000});
                return;
            }
            if (birthday === "") {
                layer.msg("生日为空", {icon: 2, time: 1000});
                return;
            }
            const formData = {
                username: username,
                password: password,
                age: age,
                birthday: birthday
            };
            // 通过ajax向后台发送请求及响应
            console.log(formData);
            console.log("[[@{/}]]")
            $('#form')[0].reset();
            $.ajax({
                url: '[[@{/}]]doRegister',
                type: "POST",
                // 对表单数据对象序列化
                data: JSON.stringify(formData),
                // 发送数据的格式和编码
                contentType: "application/json; charset=utf-8",
                // 返回值的类型
                dataType: "json",
                // 回调函数
                success: function (data) {
                    console.log(data.code + ", " + data.msg);
                    if (data.code === 200) {
                        // 登录成功，则跳转
                        layer.msg("登录成功", {icon: 1, time: 800},
                            function () {
                                // 跳转到后台主页
                                window.location.href = "[[@{/}]]login";
                            }
                        )
                    } else layer.msg(data.msg, {icon: 2, time: 2000})
                },
                error: function (data) {
                    layer.msg(data.msg, {icon: 2, time: 800});
                }
            })
        })
</script>